<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>金豆明细</title>
    <link href="css/main.css" type="text/css" rel="stylesheet" />
</head>
<body id="jdmx" >
<div class="container">
     <div class="goldenNumber clearfix">
          <span class="gn_left fl">可用金豆:<label>544</label></span>
          <span class="gn_right fr">金豆说明</span>
     </div>
     <div class="gn_detail">
          <ul class="gnd_tabList clearfix">
              <li class="detail_active"><span>全部</span></li>
              <li><span>收入</span></li>
              <li><span>支出</span></li>
          </ul>
          <ul class="gnd_tabDateil">
              <li>
                  <h2>+10</h2>
                  <p>
                      <span class="gnd_tabDateil_info">抽奖得10金豆</span>
                      <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                  </p>
              </li>
              <li>
                  <h2>+10</h2>
                  <p>
                      <span class="gnd_tabDateil_info">抽奖得10金豆</span>
                      <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                  </p>
              </li>

              <li>
                  <h2>+10</h2>
                  <p>
                      <span class="gnd_tabDateil_info">抽奖得10金豆</span>
                      <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                  </p>
              </li>

          </ul>
     </div>
</div>
<script src="js/rem.js"></script>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        $(".gnd_tabList li").click(function(){
            $(".gnd_tabList li").removeClass("detail_active");
            $(this).addClass("detail_active");
        })
    })
</script>
</body>
</html>